<!-- 扭蛋 -->
<template>
    <view class="page" :style="{backgroundImage:'url(' + $imgUrls(configInfo.backImg) + ')', backgroundColor:configInfo.bjColor,
        '--total-height': totalHeight + 'px'}" v-if="configInfo">
        <Detailstop :fromShare="fromShare"></Detailstop>
        <image :src="$imgUrls(configInfo.img)" mode="widthFix" class="m-bot30"></image>
        <view class="time flexac f-column auto" :style="{backgroundImage:'url(' + imgUrl + 'egg_time.png' + ')'}">
            <view class="size32">活动时间</view>
            <view class="size30">{{ configInfo.startDate }}-{{ configInfo.endDate }}</view>
        </view>
        <view class="p-re">
            <image :src="imgUrl + 'egg_machine.png'" mode="widthFix"></image>
            <view class="container bor_radius_30 p-ab">
                <image :src="imgUrl + 'egg_container.jpg'" mode="widthFix"></image>
                <image :src="imgUrl + item.name" mode="widthFix" class="ball p-ab" v-for="(item,index) in position" :key="index"
                    :style="{left: item.x, bottom: item.y, transform: `rotate(${item.angle}deg)`, '--angle': item.angle + 'deg',
                    '--angle1': item.angle1, '--angle2': item.angle2, '--angle-end': item.angleEnd, '--shift-x': item.shiftX, '--shift-y': item.shiftY}" 
                    :class="start ? 'playball' : ''"></image>
            </view>
            <image :src="imgUrl + 'egg_play.png'" mode="widthFix" class="play p-ab" @click="handlePlay"></image>
            <image :src="imgUrl + currentName" mode="widthFix" class="ball end p-ab" :class="{'fadeIn': fall}"></image>
            <view class="switch p-ab hidden" :class="{'turnOn': start}"></view>
        </view>
        <view class="winners auto padding40-30">
            <view class="title size30 white bold t-letter4 flexac auto m-bot20">获奖信息</view>
            <swiper class="swiper" autoplay vertical circular disable-touch v-if="configInfo.winGroups.length">
                <swiper-item v-for="(arr,idx) in configInfo.winGroups" :key="idx">     
                    <view v-for="(item,index) in arr" :key="index" class="d-flex a-center m-bot20">
                        <view class="d-flex a-center p-right20" style="width: 220rpx;">
                            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="avatar bor_radius f-shrink-0"></image>
                            <text class="h6 m-left10 ellipsis" v-if="item.v_name">{{ item.v_name }}</text>
                        </view>
                        <text class="size22 flex-1 ellipsis">{{ item.title }}</text>
                        <text class="size22 flex-1 text-right ellipsis">{{ item.addData }}</text>
                    </view>
                </swiper-item>
            </swiper>
            <emptys :top="0" v-else></emptys>
        </view>
        <!-- 中奖提示 -->
        <u-overlay :show="showResult">
            <view class="height p-re t-letter4">
                <image :src="imgUrl + 'notification.png'" mode="widthFix"></image>
                <image :src="imgUrl + 'notification_flash.png'" mode="widthFix" class="p-ab" style="left: 0; top: 0; z-index: 99"></image>
                <image :src="imgUrl + 'open_' + currentName" mode="widthFix" class="open p-ab"></image>
                <view class="result padding6040 text-center p-ab">
                    <view v-if="prizeData.type!=0">
                        <view class="size38 bold m-bot20">恭喜您中奖了!</view>
                        <image :src="$imgUrls(prizeData.img)" mode="aspectFill" class="img m-bot10"></image>
                        <view class="size30 color_FOD">{{ prizeData.title }}</view>
                    </view>
                    <view v-else>
                        <view class="size38 bold m-bot30">很遗憾</view>
                        <view class="size38 bold">您未中奖</view>
                    </view>
                </view>
                <view class="btn margin40 flexac size38 bold" @click="handleClose">我知道了</view>
		    </view>
        </u-overlay>

        <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
        <Popup v-if="showRule" :viewText="configInfo.details" :types="3" @closepopup="showRule = false"></Popup>

        <view class="round bgwhite bor_radius flexac" @click="showRule = true">
            <text class="iconfont icon-qiyejianjie size36 color_66"></text>
        </view>
        <view class="round bgwhite bor_radius flexac" @click="toUrl('/otherPage/lottery/prizeList?cid='+cid)">
            <text class="iconfont icon-a-2503 size40 color_FF8"></text>
        </view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
import Detailstop from '../components/details/top'
import Popup from '../components/popup'
export default {
    data() {
        return {
            imgUrl: this.imgUrl + 'Uploads/diy/img/',
            position: [
                { x: '250rpx', y: '60rpx' },
                { x: '40rpx', y: '-20rpx' },
                { x: '170rpx', y: '90rpx' },
                { x: '310rpx', y: '40rpx' },
                { x: '70rpx', y: '80rpx' },
                { x: '10rpx', y: '60rpx' },
                { x: '-40rpx', y: '-10rpx' },
                { x: '130rpx', y: '40rpx' },
                { x: '-70rpx', y: '56rpx' },
                { x: '370rpx', y: '80rpx' },
                { x: '370rpx', y: '-10rpx' },
                { x: '100rpx', y: '-6rpx' },
                { x: '220rpx', y: '6rpx' },
                { x: '280rpx', y: '-28rpx' },
                { x: '190rpx', y: '-16rpx' }
            ],
            cid: '', // 活动id
            fromShare: 0,
            configInfo: '',
            start: false,
            fall: false,
            prizeData: '',
            showResult: false, // 中奖提示    
            showRule: false,      
            showModal: false,
            audioContext: null, // 音频
            currentName: 'ball001.png'
        }
    },
    computed: {
        ...mapState(['totalHeight','bid','vid','share'])
    },
    components: {
        Detailstop,
        Popup
    },
    onLoad(e){
        if(e.cid) this.cid = e.cid
        if(e.fromShare) this.fromShare = e.fromShare

        this.audioContext = uni.createInnerAudioContext()
        this.audioContext.src = 'http://sravideocdn.mogoie.com/Uploads/User_files/twistedEgg_sound.mp3'

        this.getConfigInfo()

        // left: -50 - 360 bottom: -30 - 100
        this.randomAnimate(true)
    },
    onUnload(){
        if(this.audioContext){
            this.audioContext.destroy()
            this.audioContext = null
        }
    },
    methods: {
        randomAnimate(bool){
            this.position = this.position.map(item=>{
                let angle = bool ? this.getRandomNum(0, 360) : item.angle // 初始角度
                let gap = this.getRandomNum(-30, 30)
                let obj = {}
                if(bool) obj = { name: `ball00${this.getRandomNum(1, 8)}.png`, angle }
                return {
                    ...item,
                    ...obj,
                    angle1: angle + gap / 3 + 'deg',
                    angle2: angle + gap / 3 * 2 + 'deg',
                    angleEnd: angle + gap + 'deg',
                    shiftX: this.getRandomNum(-10, 10) + 'rpx',
                    shiftY: this.getRandomNum(-10, 10) + 'rpx'
                }
            })
        },
        getConfigInfo(){ // 获取配置信息
            this.$http.post({
                url: '/SRA_LuckDraw/config',
                data: {
                    VeriCode: this.bid,
                    cid: this.cid
                }
            }).then(res=>{
                if(res.code != 100) return this.$Toast(res.notice)
                this.configInfo = res.data
                // 对中奖名单进行分组
                this.configInfo.winGroups = []
                let all = this.configInfo.winningUser
                if(!all) return
                for(let i = 0; i < all.length; i += 4){
                    let group = all.slice(i, i + 4)
                    this.configInfo.winGroups.push(group)
                }
            })
        },
        handleRaffle(){ // 抽奖
            this.$http.post({
                url: '/SRA_LuckDraw/getPrize',
                data: {
                    VeriCode: this.bid,
                    cid: this.cid
                }
            }).then(res=>{
                this.start = false
                this.fall = false
                if(res.code != 100) return this.$Toast(res.notice)
                this.prizeData = res.data.prizeDate
                this.showResult = true
                this.getConfigInfo()
            })
        },
        handlePlay(){
            if (!this.vid) return this.showModal = true
            if(this.start) return // 避免重复点击
            this.start = true
            this.currentName = `ball00${this.getRandomNum(1, 8)}.png` // 随机掉球
            this.audioContext.play()
            setTimeout(()=>{
                this.audioContext.stop()
            }, 900)
            setTimeout(()=>{
                this.audioContext.play()
            }, 1100)
            setTimeout(()=>{
                this.audioContext.stop()
            }, 2000)
            setTimeout(()=>{
                this.fall = true
            }, 2500)
            setTimeout(()=>{  
                this.handleRaffle()
            }, 5000)
        },
        handleClose(){
            this.showResult = false
            this.randomAnimate(false)
        },
        getRandomNum(min, max){
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
    },
    onShareAppMessage(){
        this.$addShareNum('games', this.cid, '1')
        return {
            title: this.configInfo.title,
            path: `/pages/index/index?share_v_id=${this.vid}&pageType=17&gid=twistedEgg&cid=${this.cid}`
        }
    },
    onShareTimeline() {
        this.$addShareNum('games', this.cid, '2')
        return {
            title: this.configInfo.title,
            query: `share_v_id=${this.vid}&cid=${this.cid}&fromShare=1`,
            imageUrl: this.$imgUrls(this.configInfo.img || this.share.imageUrl)
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-repeat: no-repeat;
    background-size: 100% auto;
    // background-position: bottom; // 位于底部
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    padding-top: var(--total-height);
}
.time {
    width: 412rpx;
    height: 140rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: #A74533;
}
.container {
    width: 474rpx;
    top: 140rpx;
    left: 146rpx;
    border: 20rpx solid rgba(250,59,17,0.6);
}
.ball {
    width: 100rpx;
    z-index: 10;
    &.end {
        left: 140rpx;
        bottom: 140rpx;
        opacity: 0;
        z-index: 20;
    }
}
.play {
    width: 208rpx;
    top: 475rpx;
    left: 50%;
    margin-left: -104rpx;
}
.switch {
   width: 80rpx;
   height: 80rpx; 
   background: linear-gradient(-45deg, #FFA75E, #F55E1D);   
   box-shadow: 2rpx 0rpx 0rpx 0rpx #FFC255;
   border-radius: 50%;
   right: 160rpx;
   bottom: 162rpx;
   &::after {
        content: '';
        width: 80rpx;
        height: 18rpx;     
        background: linear-gradient(150deg, #FF8F4A, #EF690E);    
        box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(207,45,19,0.5), 0rpx 1rpx 0rpx 0rpx #FFA05D, 1rpx 0rpx 0rpx 0rpx #FFA05D;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
.winners {
    width: 634rpx;
    height: 480rpx; 
    background: #FEFEFE;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    border: 10rpx solid #FFBC52;
    margin-top: -30rpx;
    .title {
        width: 312rpx;
        height: 70rpx;
        background: linear-gradient(0deg, #FB8446, #F31D08);
        border-radius: 35rpx;
    }
    .swiper {
        height: 320rpx;
        color: #DD1809;
        .avatar {
            width: 60rpx;
            height: 60rpx;
        }
    }
}
.open {
    width: 120rpx;
    top: 306rpx;
    left: 50%;
    margin-left: -60rpx;
}
.result {
    width: 550rpx;
    height: 350rpx;
    left: 50%;
    margin-left: -275rpx;
    top: 500rpx;
    .img {
        width: 120rpx;
        height: 120rpx;
    }
}
.btn {
    width: 400rpx;
    height: 90rpx;
    background: #FFDC3A;
    box-shadow: 0rpx 8rpx 0rpx 0rpx #F1A30D, 5rpx 3rpx 6rpx 0rpx #FFFCF5;
    border-radius: 45rpx;
    color: #F03A19;
}
.round {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    top: calc(30rpx + var(--total-height));
    right: 20rpx;
    z-index: 20;
    &:last-child {
        top: calc(100rpx + var(--total-height));
    }
}
.fadeIn { animation: fade-in 2.5s forwards; }
.turnOn { animation: turn-on 2s forwards; }
.playball { animation: move 2s forwards; }
@keyframes fade-in {
    0% { opacity: 0; } 
    20% { opacity: 1; transform: translateY(44rpx); }
    100% { opacity: 1; transform: translate(185rpx, -542rpx) scale(3); }
}
@keyframes turn-on {
    0% { transform: rotate(0); } 
    45% { transform: rotate(112.5deg); }
    55% { transform: rotate(112.5deg); }
    100% { transform: rotate(225deg); } 
}
@keyframes move {
    0% { transform: rotate(var(--angle)) translate(0,0)} 
    15% { transform: rotate(var(--angle1)) translate(var(--shift-x),var(--shift-y)); }
    30% { transform: rotate(var(--angle2)) translate(0,0)} 
    45% { transform: rotate(var(--angle-end)) translate(var(--shift-x),var(--shift-y)); }
    55% { transform: rotate(var(--angle-end)) translate(var(--shift-x),var(--shift-y)); }
    70% { transform: rotate(var(--angle2)) translate(0,0)} 
    85% { transform: rotate(var(--angle1)) translate(var(--shift-x),var(--shift-y)); }
    100% { transform: rotate(var(--angle)) translate(0,0) } 
}
</style>